<template>
  <div class="layout">
    <div class="population">
      <p class="population_title">今日客户跟进人数</p>
      <p class="population_num">{{ props.basicInfo.follow_num }}</p>
    </div>
    <div class="population">
      <p class="population_title">今日客户跟进记录</p>
      <p class="population_num">{{ props.basicInfo.follow_record }}</p>
    </div>
    <div class="population">
      <p class="population_title">累计客户跟进人数</p>
      <p class="population_num">{{ props.basicInfo.sum_follow_num }}</p>
    </div>
    <div class="population">
      <p class="population_title">累计客户跟进记录</p>
      <p class="population_num">{{ props.basicInfo.sum_follow_record }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
const props = withDefaults(
  defineProps<{
    basicInfo: any
  }>(),
  {
    basicInfo: {
      follow_num: 0,
      follow_record: 0,
      sum_follow_num: 0,
      sum_follow_record: 0
    }
  }
)
</script>

<style lang="scss" scoped>
p {
  padding: 0;
  margin: 0;
}
.layout {
  height: 120px;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .population {
    text-align: center;
    &_title {
      font-size: 16px;
      font-weight: 400;
      color: #35383a;
      line-height: 16px;
    }
    &_num {
      font-size: 46px;
      font-weight: 500px;
      color: #ff6b00;
      line-height: 46px;
    }
    &_border {
      height: 104px;
      border-left: 1px solid #f0f0f0;
      margin: 0 210px;
    }
  }
}
</style>
